<template>
  <a-form :model="formState" ref="formRef" layout="vertical">
    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="租户名称" name="name" :rules="[{ required: true, message: '请输入租户名称' }]">
          <a-input v-model:value="formState.name" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="显示名称" name="displayName" :rules="[{ required: true, message: '请输入显示名称' }]">
          <a-input v-model:value="formState.displayName" />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :span="12">
        <a-form-item label="联系人">
          <a-input v-model:value="formState.contractName" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="联系电话">
          <a-input v-model:value="formState.contractPhone" />
        </a-form-item>
      </a-col>
    </a-row>

    <a-form-item label="状态">
      <a-switch v-model:checked="formState.enabled" />
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { TenantApi } from '@/api/services/index';
import { GetIdInput, QueryApiBaseResultDto, UpdateTenantInput } from '@/api/services/types';
import { FormInstance, message } from 'ant-design-vue';
import { computed, ref, watch } from 'vue';

const formRef = ref<FormInstance>();

const props = defineProps<{
  id?: string;
}>();

const isEdit = computed(() => {
  if (props.id) {
    return true;
  }
  return false;
})


interface CreateTenantInput extends Omit<UpdateTenantInput, 'id'> {}

const formState = ref<CreateTenantInput | UpdateTenantInput>({
  name: '',
  displayName: '',
  contractName: '',
  contractPhone: '',
  logo: '',
  id: '',
  readOnly: false,
  enabled: true
});

const loadData = (id: string) => {
  const input: GetIdInput = {
    id: id,
    readOnly: false
  }
  TenantApi.get(input).then(res => {
    const { code, data, msg } = res;
    if (code == 0) {
      formState.value = Object.assign({}, formState.value, data);
    } else {
      message.error(msg)
    }
  })
};

watch(() => props.id, (newId) => {
  if (newId) {
    loadData(newId);
  } else {
    Object.assign(formState.value, {
      name: '',
      displayName: '',
      contractName: '',
      contractPhone: '',
      enabled: true,
      id: ''
    });
  }
}, { immediate: true });

const submit = function (): Promise<QueryApiBaseResultDto<boolean>> {
  return new Promise((resolve, reject) => {
    formRef.value?.validate().then(() => {
      const input = { ...formState.value, id: props.id }
      const request = isEdit.value ? TenantApi.update(input) : TenantApi.create(input);
      request.then(res => {
        resolve(res);
      }).catch(err => {
        console.error(err)
        reject({
          data: false,
          code: 1,
          msg: '网络错误'
        })
      })
    }).catch((err) => {
      reject({
        data: false,
        code: 2,
        msg: err.errorFields[0].errors[0]
      })
    })
  })


};

defineExpose({
  submit
});
</script>
